<template>
<div class="pl-squares">

  <swiper class="swiper" ref="mySwiper" :options="swiperOptions">
    <swiper-slide class="swiper-item" v-for="(cate, index) in hotCate" :key="cate">
      <keep-alive>
        <div v-if="active !== index" class="loading">loading...</div>
        <recycle-scroller v-else
          class="playlist-scroller"
          :items="playlists"
          :item-size="200"
          :buffer="5"
          key-filed="id"
          v-slot="{ item }">
          <div class="playlist-row">
            <base-playlist-item class="playlist-item"
              v-for="(cell, index) of item.list" :key="index"
              :width="itemWidth + 'px'"
              :id="cell.id"
              :img="cell.coverImgUrl + '?param=100y100'"
              :playcount="cell.playCount"
              :desc="cell.description"/>
          </div>
        </recycle-scroller>

      </keep-alive>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</div>
</template>

<script>
export default {
  name: 'palylist-squares',
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        on: {
          slideChange: _ => {
            const activeIndex = this.swiper.activeIndex
            this.onSwiperChange(activeIndex)
          }
        }
      },
      loading: true,
      active: 0, // tab 和 swiper 共同维护
      hotCate: [], // tab 列表
      playlists: [] // 当前 tab 下的 playlist
    }
  },
  mounted () {
    this.extractPlaylistHot()
  },
  activated () {
    // 销毁外层 scroll
    this.$emit('destroyScroll')
  },
  computed: {
    itemWidth () {
      return Math.floor(414 / 3.5)
    },
    swiper () {
      return this.$refs.mySwiper.swiperInstance
    },
    content () {
      return this.$refs.mySwiper.$el
    }
  },
  methods: {
    onTabSelect (index) {
      this.extractPlaylistByCate(this.hotCate[index], index)
    },
    // 滑动 swiper 触发数据请求
    onSwiperChange (index) {
      this.loading = true
      this.playlists.length = 0
      this.active = index
      this.extractPlaylistByCate(this.hotCate[index], index)
    },
    updateHeight () {
      const height = this.content.getBoundingClientRect().height
      this.$refs.content.style.height = height + 'px'
      if (this.scroll) {
        this.scroll.refresh()
        this.scroll.scrollTo(0, 0)
      }
    },
    to3ColList (playlists) {
      const ret = []
      for (let i = 0, l = playlists.length; i < l; i += 3) {
        const list = playlists.slice(i, i + 3)
        ret.push({ list, id: i })
      }
      return ret
    },
    extractPlaylistHot () {
      this.$api.getPlaylistHot().then(res => {
        const { tags } = res.data
        this.hotCate = tags.map(v => v.name)
        this.extractPlaylistByCate(this.hotCate[0])
      })
    },
    extractPlaylistByCate (cat) {
      setTimeout(() => {
        this.$api.getTopPlaylist({ cat, limit: 100 }).then(res => {
          this.loading = false
          const { data } = res
          this.playlists = this.to3ColList([].concat(data.playlists))
          console.log(this.playlists)
        })
      }, 100)
    }
  }
}
</script>

<style lang="scss" scoped>
.loading {
  text-align: center;
  font-size: 20px;
}

.playlist {
  &-scroller {
    width: 100%;
    height: 100%;
  }

  &-row {
    display: flex;
    justify-content: space-between;
  }
}
</style>
